// base
require("../../both/base")

// css
require("./UserVideoSidebar.scss")

import Popup from "../../both/Popup/Popup.jsx"

function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return null;
}


class UserVideoSideBar extends React.Component{
    constructor(props){
        super(props)

        this.state = {
            modalState : false,
            note : ""
        }
    }

    makeNote(){
        if(this.props.logined){
            this.setState({
                modalState : true
            })
        }
    }

    hideModal(){
        this.setState({
            modalState : false
        })
    }

    changeHandle(name,e){
        var change = {}
        change[name] = e.target.value
        this.setState(change)
    }

    submitNote(){
        var self = this

        if(! self.props.logined){
            return
        }

        if(self.state.note == ""){
            toastr.waring("评论不可为空")
            return
        }

        var LoginToken = getCookie("LoginToken")
        const {addNote} = this.props

        fetch("/education/user/comment/add",{
            method: 'POST',
            body:   JSON.stringify({
                LoginToken,
                content : self.state.note,
                isNote : "1",
                courseId : this.props.courseId
            }),
            headers: { 'Content-Type': 'application/json' },
            credentials : "same-origin"
        })
            .then(res => res.json())
            .then(json => {
                if(json.status !== 200){
                    toastr.error("用户已注销，请重新登录")
                    return
                }

                toastr.success("笔记记录成功")
                self.setState({
                    note : ""
                })
                self.hideModal()

                addNote(json.msg)

            }).catch((err) => {
                toastr.error("后台错误")
                self.setState({
                    note : ""
                })
        })
    }

    render(){
        const makeNote = this.makeNote.bind(this)
        const hideModal = this.hideModal.bind(this)
        const submitNote = this.submitNote.bind(this)

        return (
            <div className="user_video_sidebar bln">
                <ul>
                    <li onClick={makeNote}>
                        <i className="fa fa-pencil"></i>
                        <span>笔记</span>
                    </li>
                    <a href="#commentBox"><li>
                        <i className="fa fa-comment"></i>
                        <span>评论</span>
                    </li></a>
                </ul>

                <Popup show={this.state.modalState} onCancel={hideModal} showCtrl={false} showHeader={false} title="登录" isFluid={true}>
                    <div className="video_sidebar_popup_cr">
                        <div className="modal-title">
                            <div className="modal-draggable">
                                <span>笔记</span>
                                <a href="javascript:void(0)" onClick={hideModal} className="mooc-icon-close">
                                    <i className="fa fa-close"></i>
                                </a>
                            </div>
                        </div>
                        <div className="modal-dialog">
                            <div className="note-pop">
                                <div className="text_area_wrap">
                                    <textarea name="note" id="js-note-textarea" placeholder="请输入笔记内容" value={this.state.note} onChange={this.changeHandle.bind(this,"note")}/>
                                </div>
                                <div className="btn_wrap">
                                <div className="publish_notes_btn" onClick={submitNote}>
                                    保存
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </Popup>
            </div>
        )
    }
}

export default UserVideoSideBar